<template>
	<h2>子组件</h2>
	<!-- 3.接收数据 4.显示数据 -->
<!-- 	msg的值：{{msg}} <br />
	stuname的值：{{stuname}} <br />
	age的值：{{age}} <br /> -->
	
	<h2>音乐排行榜</h2>
	<table class="table table-striped">
	    <thead>
	      <tr>
	        <th>序号</th>
	        <th>标题</th>
	        <th>歌手</th>
			<th>是否已收藏</th>
	      </tr>
	    </thead>
	    <tbody>
	      <tr>
	        <td>{{num1}}</td>
	       <!-- <td>{{stitle1}}</td>
	        <td>{{singer1}}</td>
	        <td>{{isLike1}}</td> -->
	      </tr>
	      <!-- <tr>
	        <td>{{song2[0]}}</td>
	        <td>{{song2[1]}}</td>
	        <td>{{song2[2]}}</td>
	        <td>{{song2[3]}}</td>
	      </tr>
	      <tr>
	        <td>{{song3.num3}}</td>
	        <td>{{song3.stitle3}}</td>
	        <td>{{song3.singer3}}</td>
	        <td>{{song3.isLike3}}</td>
	      </tr> -->
	    </tbody>
	</table>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	//1.声明props 对象
	// const props=defineProps({
	// 	msg:String,
	// 	stuname:String,
	// 	age:Number
	// })
	// 声明props 字符串数组
	// const props=defineProps(['msg','stuname','age'])
	// const props=defineProps(['num1','stitle1','singer1','isLike1','song2','song3'])
	
	//校验
	const props=defineProps({
		num1:{
			//基础类型校验
			type:[Number,String],
			//必填项校验
			required:true,
			//默认值
			default:0
			//自定义	
		}
	})
	
</script>

<style scoped>
</style>